<template>
  <div>
      <el-card>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="名称"  prop="fname" required>
                <el-input v-model="form.fname">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="编码" prop="fnumber" required>
                <tie-number-role class-key="WorkShopResult" v-model="form.fnumber"></tie-number-role>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人数" prop="fmanqty" required>
                <el-input-number v-model="form.fmanqty"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="fstatus" required>
                <el-select v-model="form.fstatus" placeholder="请选择活动状态">
                  <el-option label="启用" value="BASE"></el-option>
                  <el-option label="禁用" value="AUX"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="fdescription">
                <el-input type="textarea" v-model="form.fdescription"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-button style="margin-bottom: 10px" type="primary" @click="handle_insert">新增</el-button>
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </div>
        <!--          <el-button style="margin-bottom: 10px" type="primary" @click="handle_del">删除</el-button>-->
        <vxe-table
          row-key
          show-overflow
          highlight-hover-row
          stripe
          resizable
          ref="xTable1"
          :edit-rules="entryRules"
          :edit-config="entry_config"
          class="my_table_insert"
          max-height="300"
          :data="tableData"
          :model="tableData"
          :auto-resize="true"
          :scroll-y="{enabled:false}"
          border>
          <vxe-table-column width="60">
            <template v-slot>
				<span class="drag-btn">
					<i class="vxe-icon--menu"></i>
				</span>
            </template>
            <template v-slot:header>
              <vxe-tooltip v-model="showHelpTip1" content="按住后可以上下拖动排序！" enterable>
                <i class="vxe-icon--question" @click="showHelpTip1 = !showHelpTip1"></i>
              </vxe-tooltip>
            </template>
          </vxe-table-column>
          <vxe-table-column type="seq" title="序号" width="80"></vxe-table-column>
          <vxe-table-column title="名称" field="fname">
            <template slot-scope="scope">
              <input-select v-model="scope.row.fname"
                  :load-show="scope.row.fnumber"
                   :f7-param="f7ParamEquipment"
                            title="设备列表"
              ></input-select>
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态" field="fstatus" required>
            <template slot-scope="scope">
              <el-select v-model="scope.row.fstatus" placeholder="请选择活动状态">
                <el-option title="正常" value="NORMAL"></el-option>
                <el-option title="报废" value="ABDM"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column title="编码" field="fnumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fnumber"></el-input>
            </template>
          </vxe-table-column>
          <vxe-table-column prop="bookbuytime" title="操作">
            <template slot-scope="scope">
              <!--              v-if="!scope.row.editing"-->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handle_del(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>

  </div>

</template>

<script>
import Work from "@/api/workshopManager/Work";
import TieNumberRole from "@/components/tie/tie-number-role";
import Sortable from 'sortablejs';

export default {
  name: "addEdit_work",
  components: {TieNumberRole,
    Sortable
  },
  props: {
    workAdd: Object,
    fid:null,

  },
  data() {
    return {
      dialogVisible: true,
      isview:false,
      form: {
        fname: '',
        fnumber: '',
        fmanqty: '',
        fstatus: '',
        fdescription: ''
      },

      tableData: [],
      isLoading:false,
      rules: {
        fname: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {max: 16, message: '长度在 16字符', trigger: 'blur'}
        ],
        fnumber: [{required: true, message: '请输入编码', trigger: 'blur'}],
        fmanqty: [{required: true, message: '请输入人数', trigger: 'blur'}],
        fstatus: [{required:true,message:'请选择状态',trigger:'blur'}]
      },
      entryRules:{
        fatstus:[{required:true,message:'状态不能为空'}],
        fname:[{required:true,message:'名称不能为空'}],

      },
      title:'',
      entry_config:{trigger:'click',mode:'cell'},
      http:new Work,
    };
  },
  async created() {
    this.f7ParamEquipment={
      selectId:'fid',
      selectUrl:'/tie-demo/equip/queryListPage',
      selectTreeField:['fgroupid'],
      selectTreeUrl:'/tie-demo/groupTree/queryGroupTree',
      selectShow:{spt: '',field: ['fname']},
      column:[{lable:'编号',prop:'fnumber',isFilter:true,filterField:'fnumber'},{lable:'名称',prop:'fname',isFilter:false,filterField:'fname'}
        ,{lable:'规格型号',prop:'fmodel',isFilter:false,filterField:'fmodel'}
        ,{lable:'简称',prop:'fsimplename',isFilter:true,filterField:'fsimplename'}],
      defaultFilter:[{field:'fstatus',value:"BASE"},{field:'fismain',value:1}]
    }
    this.isLoading = true
    if (this.status == 'add') {
      this.title = "新增数据"
    } else{
      if(this.status == 'edit') {
        this.title = "编辑数据"
      } else if (this.status == 'view') {
        this.title = "查看数据"
        this.isview = true;
        this.rules = {};
        this.entryConfig = {};
        this.entryRules = {};
      }
      let http = new Work;
      let tableData = await http.findByOne({fid: this.fid});
      console.log(tableData);
      this.form=tableData.data
      this.tableData=tableData.data.entrys;
    }
    //this.getTagtypeList();
    //this.getUnitList();
    this.isLoading = false
    this.rowDrop();
    this.columnDrop();
  },
  beforeDestroy() {
    if (this.sortable1) {
      this.sortable1.destroy()
    }
  },
  methods: {
    handleClose() {
      this.$emit("close", {name: 'addEdit', isRefresh: false}
      );
    },
    rowDrop() {
      this.$nextTick(() => {
        const xTable = this.$refs.xTable1
        this.sortable1 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
          handle: '.drag-btn',
          onEnd: ({
                    newIndex,
                    oldIndex
                  }) => {
            const currRow = this.tableData.splice(oldIndex, 1)[0]
            this.tableData.splice(newIndex, 0, currRow)
          }
        })
      })

  },
    columnDrop(){
      const wrapperTr=document.querySelector('.el-table__header-wrapper tr')
      this.sortable1=Sortable.create(wrapperTr,{
        animation:180,
        delay:0,
        onEnd:evt =>{
          const oldItem=this.v_slot[evt,oldIndex]
          this.v_slot.splice(evt.oldIndex,1)
          this.v_slot.splice(evt.newIndx,0,oldItem)
        }
      })
    },
    async submitForm() {
      this.$refs['form'].validate((valid) => {
        this.form.entrys = this.tableData
        console.log(this.form)
        if (valid) {
          const loading = this._loading();
          const api = new Work();
          api.add(this.form).then(res => {
            loading.close();
            this.$tie.showSuccess(res.message)
            this.$emit("close", {name: 'addEdit', isRefresh: true});
          }).catch(e => loading.close())
        }
        return false;
      })
    },
    handle_del(index, row) {
      this.tableData.splice(index, 1);
    },
    handle_insert() {
      const newValue = {
        fname: '',
        fstatus: '',
        fnumber: '',
        foid: ''
      };
      this.tableData.push(newValue)
      console.log(newValue)
    }
    ,
    //加载提示
    _loading() {
      return this.$loading({
        lock: true,
        text: '请耐心等待.....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>

<style scoped>

</style>
